<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" data-href = 'abc/list1.html'>
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">音乐列表</span>
        </a>
        <a class="mui-tab-item" data-href = 'abc/list2.html'>
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">新闻</span>
        </a>
        <a class="mui-tab-item" data-href = 'abc/list3.html'>
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">个人中心</span>
        </a>
        
    </nav>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init()
    mui.plusReady(function(){
    	//定义子页面
    	var pages = ['abc/list1.html','abc/list2.html','abc/list3.html'];
    	//设置页面的样式
    	var pages_style = {
    		top:0,
    		bottom:'51px'
    		
    	}
    	
    	//获取当前的窗口
    	var self = plus.webview.currentWebview();
    	//创建子页面
    	for(var i=0;i<pages.length;i++){
    		var abb = plus.webview.create(pages[i],pages[i],pages_style);
    		if(i>0){
    			abb.hide();
    		}
    		self.append(abb);
    	}
    	//处于激活状态的页面
    	var jiye = pages[0];
    	//给选项卡绑定点击事件
    	mui('.mui-bar-tab').on('tap','a',function(){
    		 //获取目标页面
    		 var targetye = this.getAttribute('data-href');
    		 if(targetye == jiye){
    		 	return;
    		 }
    		 plus.webview.show(targetye);
    		 plus.webview.hide(jiye);
    		 jiye = targetye;
    	});
    })
    
    
    </script>
</body>
</html>
